<script>
import pdf from "vue-pdf";
import {getDic} from "@/api/common";
import * as api from "@/api/signatureTemplateManage/index"

export default {
  name: "signatureViewTemp",
  components: {pdf},
  data() {
    return {
      resize: {
        "A3": 0.71,
        "A4": 1,
        "A5": 1.42,
        "A6": 2,
      },
      pdfPage: 1,
      totalPage: 0,

      specification: "",
      specificationList: [],

      canvasListAll: []
    }
  },
  computed: {
    pageSize() {
      let arr = this.specificationList.filter(i => i.name === this.specification);
      if (arr.length > 0) {
        return arr[0].value.split("_")
      }
      return [0, 0];
    }
  },
  methods: {
    getSize(row) {
      getDic("paper_size").then(res => {
        this.specificationList = res.data.data;
        this.specification = this.specificationList[0].name

        for (let i = 0; i < this.specificationList.length; i++) {
          let item = this.specificationList[i];

          this.$set(this.canvasListAll, item.name, []);
        }

        api.getDetail({oid: row.oid}).then(res => {
          let data = res.data.data;
          data.coordinateList.forEach(item => {
            this.canvasListAll[item.specification].push(item)
          })
        })
      })
    },
    view(row) {
      this.getSize(row);
    }
  }
}
</script>

<template>
  <div class="signatureViewTemp">
    <div class="size">
      <el-radio-group v-model="specification" size="small">
        <template v-for="item in specificationList">
          <el-radio-button :label="item.name"></el-radio-button>
        </template>
      </el-radio-group>
    </div>
    <div class="con" :style="{height:pageSize[0]+'mm',width:pageSize[1]+'mm'}">
      <pdf :style="{height:pageSize[0]+'mm',width:pageSize[1]+'mm'}"
           @num-pages="totalPage = $event"
           src="http://localhost:4444/file/pdf.pdf"
           :page="pdfPage">
      </pdf>

      <template v-for="item in canvasListAll[specification]">
        <div class="rect"
             :style="{top:item.y+'px',left:item.x+'px',width:item.width+'px',height:item.height+'px'}">
          {{ item.name }}
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped lang="scss">
.signatureViewTemp {
  height: 100%;
  width: 100%;
}

.size {
  width: 100%;
  height: 30px;
  position: fixed;

}

.con {
  position: relative;
  border: 1px solid #000;
  overflow: hidden;
  margin: auto;

  .rect {
    position: absolute;
    background: rgba(0, 0, 0, 0.55);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 14px;
    color: white;
  }
}
</style>
